<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Spawned Persistent Spheres Example — Networked-Aframe</title>
    <meta name="description" content="Spawned Persistent Spheres Example — Networked-Aframe" />

    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js"></script>
    <script src="/easyrtc/easyrtc.js"></script>
    <script src="/dist/networked-aframe.js"></script>
    <script>
      // see issue https://github.com/networked-aframe/networked-aframe/issues/267
      NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents;
      NAF.schemas.getComponents = (template) => {
        if (!NAF.schemas.hasTemplate('#avatar-template')) {
          NAF.schemas.add({
            template: '#avatar-template',
            components: [
              {
                component: 'position',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)
              },
              {
                component: 'rotation',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)
              },
              {
                selector: '.head',
                component: 'material',
                property: 'color'
              }
            ]
          });
        }
        if (!NAF.schemas.hasTemplate('#sphere-template')) {
          NAF.schemas.add({
            template: '#sphere-template',
            components: [
              'position',
              {
                component: 'material',
                property: 'color'
              }
            ]
          });
        }
        const components = NAF.schemas.getComponentsOriginal(template);
        return components;
      };
    </script>

    <script src="https://cdn.jsdelivr.net/npm/aframe-randomizer-components@3.0.2/dist/aframe-randomizer-components.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-environment-component@1.5.0/dist/aframe-environment-component.min.js"></script>
    <script src="/js/spawn-in-circle.component.js"></script>
    <script src="/js/color-changer.component.js"></script>
    <script src="/js/spawner-persistent.component.js"></script>
    <script src="/js/persistent-p2p.component.js"></script>
    <!--
      The spawner-persistent and persistent-p2p components go together,
      spawner-persistent is set on the player entity,
      persistent-p2p on the a-scene entity.
      The persistent-p2p component handle the logic of keeping the persistent entities peer to peer.
      The spheres are kept in the room if there is at least one participant remaining in the room.
    -->
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
  </head>
  <body>
    <a-scene
      cursor="rayOrigin: mouse"
      raycaster="objects:.raycastable"
      persistent-p2p
      networked-scene="
        room: persistent-peer-to-peer;
        debug: true;
        adapter: wseasyrtc"
    >
      <a-assets>
        <!-- Templates -->
        <template id="sphere-template">
          <a-entity class="raycastable" geometry="primitive: sphere" material="color: red" color-changer></a-entity>
        </template>

        <!-- Avatar -->
        <template id="avatar-template">
          <a-entity class="avatar">
            <a-sphere class="head" scale="0.45 0.5 0.4"></a-sphere>
            <a-entity class="face" position="0 0.05 0">
              <a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
              </a-sphere>
              <a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
              </a-sphere>
            </a-entity>
          </a-entity>
        </template>

        <!-- /Templates -->
      </a-assets>

      <a-entity id="rig">
        <a-entity
          id="player"
          networked="template:#avatar-template;attachTemplateToLocal:false;"
          camera
          position="0 1.6 0"
          spawn-in-circle="radius:3"
          spawner-persistent="template:#sphere-template"
          wasd-controls
          look-controls
        >
          <a-sphere class="head" visible="false" random-color></a-sphere>
        </a-entity>
      </a-entity>

      <a-entity environment="preset:arches"></a-entity>
    </a-scene>

    <div class="controls">
      <p>
        Press space to spawn a sphere that will persist even if you leave the room at the condition there is a
        participant that stay in the room.
      </p>
    </div>

    <script>
      // Called by Networked-Aframe when connected to server
      function onConnect() {
        console.log('onConnect', new Date());
      }
    </script>
  </body>
</html>
